<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>牛皮小系统</title>
    <!-- 引入通用的js, css等 -->
    <jsp:include page="${request.contextPath}/static/include.jsp" flush="true" />
</head>
<body>
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card" style="height: 94%; overflow-y:auto;">
                    <div class="layui-card-header">调用外部webservice</div>
                    <div class="layui-card-body">
                        <%-- 折叠面板 --%>
                        <div class="layui-collapse" lay-filter="demo1">
                            <%-- 注释原因：天气接口有bug
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">天气</h2>
                                <div class="layui-colla-content layui-show">
                                    <div class="layui-form-item">
                                        输入城市名, 获取城市该天的天气
                                    </div>
                                    <div class="layui-form-item">
                                        <label for="cityName" class="layui-form-label" style="padding:9px 15px 9px 0; width:60px; text-align: left;">城市名:</label>
                                        <div class="layui-input-inline">
                                            <input id="cityName" type="text" class="layui-input">
                                        </div>
                                        <button id="searchBtn_weather" type="button" class="layui-btn layui-icon custom" style="margin-left: 30px;padding: 0 10px;">&#xe615;&nbsp;查询</button>
                                    </div>
                                </div>
                            </div>
                            --%>
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">手机号码归属地</h2>
                                <div class="layui-colla-content layui-show">
                                    <div class="layui-form-item">
                                        输入手机号码，查询归属地
                                    </div>
                                    <div class="layui-form-item">
                                        <label for="mobileCode" class="layui-form-label" style="padding:9px 15px 9px 0; width:60px; text-align: left;">手机号码:</label>
                                        <div class="layui-input-inline">
                                            <input id="mobileCode" type="text" class="layui-input">
                                        </div>
                                        <button id="searchBtn_mobileCode" type="button" class="layui-btn layui-icon custom" style="margin-left: 30px;padding: 0 10px;">&#xe615;&nbsp;查询</button>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">邮政编码</h2>
                                <div class="layui-colla-content layui-show">
                                    <div class="layui-form-item">
                                        输入邮政编码，查询所在地
                                    </div>
                                    <div class="layui-form-item">
                                        <label for="zipCode" class="layui-form-label" style="padding:9px 15px 9px 0; width:60px; text-align: left;">邮政编码:</label>
                                        <div class="layui-input-inline">
                                            <input id="zipCode" type="text" class="layui-input">
                                        </div>
                                        <button id="searchBtn_zipCode" type="button" class="layui-btn layui-icon custom" style="margin-left: 30px;padding: 0 10px;">&#xe615;&nbsp;查询</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <%-- 折叠面板结束 --%>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card" style="height: 94%; overflow-y:auto;">
                    <div class="layui-card-header">调用本地webservice</div>
                    <div class="layui-card-body">
                        <%-- 折叠面板 --%>
                        <div class="layui-collapse" lay-filter="demo1">
                            <div class="layui-colla-item">
                                <h2 class="layui-colla-title">HelloWorld</h2>
                                <div class="layui-colla-content layui-show">
                                    <form class="layui-form" id="demo2" action="">
                                        <div class="layui-form-item">
                                            调用牛皮小系统后台的webservice服务器端
                                        </div>
                                        <div class="layui-form-item">
                                            <label for="clientParam" class="layui-form-label" style="padding:9px 15px 9px 0; width:60px; text-align: left;">输入参数:</label>
                                            <div class="layui-input-inline">
                                                <input id="clientParam" type="text" class="layui-input">
                                            </div>
                                            <button id="searchBtn_server" type="button" class="layui-btn layui-icon search_btn custom" style="margin-left: 30px;padding: 0 10px;">&#xe615;&nbsp;查询</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <%-- 折叠面板结束 --%>

                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<script>
    layui.use(['form', 'element', 'layer'], function(){
        var $ = layui.jquery,
            form = layui.form
            ,element = layui.element
            ,layer = layui.layer;

        $("#searchBtn_server").click(function () {
            var clientParam = $("#clientParam").val();
            if(!clientParam){
                layer.alert("请输入请求参数");
                return;
            }

            $.ajax({
                url: __ctxPath + '/ws/helloworld/userService/user/' + clientParam, //请求url
                type: 'options', //请求方式
                dataType: 'json', //返回数据的类型
                success(data){
                    layer.alert(data.data);
                }
            })

        });

        //查询手机号归属地
        $("#searchBtn_mobileCode").click(function(){
            var mobileCode = $("#mobileCode").val();
            if(!mobileCode || mobileCode==0){
                layer.alert("请输入正确的手机号码");
                return;
            }
            layer.open({
                type: 2
                ,area: ['60%', '60%']
                ,fixed: false //不固定
                ,content: __ctxPath + '/framework/module/webservice.do?method=getMobileCodeInfo&mobileCode=' + mobileCode
            });
        });

        //邮政编码
        $("#searchBtn_zipCode").click(function(){
            var zipCode = $("#zipCode").val();
            if(!zipCode || zipCode.length!=6){
                layer.alert("请输入正确的邮政编码");
                return;
            }
            window.open(__ctxPath + '/framework/module/webservice.do?method=getAddressByZipCode&zipCode=' + zipCode);
        });

    });

</script>





























